<template>
	<div class="all">
		<div style="width: 500px; background: #fff; padding: 50px 0; border-radius: 5px; box-shadow: 2px 2px 10px #999;">
			<div class="logo"><img src="../../static/img/wulianwanglogo.png"></div>
			<div class="title">落基伟业物联网系统后台</div>
			<div class="flex">
				<div class="f1">账户：</div>
				<div class="f2">
					<el-input v-model="zhanghu.username" style="width: 300px;" placeholder="账户"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">密码：</div>
				<div class="f2">
					<el-input v-model="zhanghu.password" show-password style="width: 300px;" placeholder="密码"></el-input>
				</div>
			</div>
			<div style="text-align: center; margin-top: 30px;">
				<el-button type="primary" @click="login">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'login',
		data() {
			return {
				zhanghu: {
					username: "",
					password: ""
				}
			}
		},
		created() {
			console.log(this.url)
		},
		methods: {
			//登陆
			login: function() {
				if(this.zhanghu.username == '' || this.zhanghu.password == ''){
					this.$message.error('请输入用户名和密码！');
					return false
				}
				this.axios.post(this.url+`/web/user/login?username=${this.zhanghu.username}&password=${this.zhanghu.password}`)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("登录成功");
							localStorage.setItem('person', JSON.stringify(response.data.result.userInfo))
							localStorage.setItem('token', response.data.result.token)
							if(response.data.result.userInfo.userIdentity == 2){
								this.$router.push('/ka')
							}
							if(response.data.result.userInfo.userIdentity == 4){
								this.$router.push('/dailishangbaobiao')
							}
							else{
								this.$router.push('/index')
							}
							
						} else {
							this.$message.error(response.data.message);
						}
					})
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;

		.logo {
			text-align: center;
			margin-bottom: 20px;
		}

		.title {
			font-size: 25px;
			text-align: center;
			margin-bottom: 50px;
			font-weight: bold;
			background-image: linear-gradient(135deg, red, blue);
			-webkit-background-clip: text;
			color: transparent;
		}
	}
</style>
